:host {
  display: block;
  height: 100%;
  width: 100%;
}

.canvas-grid {
  background-image: radial-gradient(circle, #ddd 1px, transparent 1px);
  background-size: 20px 20px;
}

.sidebar-transition {
  transition: width 0.3s ease-in-out;
}

.resize {
  resize: both;
  overflow: auto;
}

button {
  transition: all 0.2s ease-in-out;
}

button:hover {
  transform: scale(1.05);
}

.cursor-move {
  cursor: move;
}

:host {
  display: block;
  height: 100%;
  width: 100%;
}

.canvas-grid {
  background-image: radial-gradient(circle, #ddd 1px, transparent 1px);
  background-size: 20px 20px;
}

.sidebar-transition {
  transition: width 0.3s ease-in-out;
}

.resize {
  resize: both;
  overflow: auto;
}

button {
  transition: all 0.2s ease-in-out;
}

button:hover {
  transform: scale(1.05);
}

.cursor-move {
  cursor: move;
}

/* 新添加的拖拽相关样式 */
.cursor-grabbing {
  cursor: grabbing !important;
}

.select-none {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.pointer-events-none {
  pointer-events: none;
}

.canvas-container {
  position: relative;
  /* 确保事件能正常触发 */
  pointer-events: auto;
}

.cursor-move {
  cursor: move;
}


/* 拖拽时的阴影效果 */
.absolute[style*="z-index: 1000"] {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  opacity: 0.9;
}

/* 拖拽时的过渡效果 */
.transition-colors {
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* 防止拖拽时文本被选中 */
.dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}
